<template>
  <div class="promote">
    <header>
      <div>
        活动截止：{{ countdown.timeBucket }} {{ countdown.hour | fillZero }}:00
      </div>
      <div>
        <div>活动仅剩</div>
        <van-count-down :time="countdown.time">
          <template #default="timeData">
            <span class="time">{{
              (timeData.hours * 60 + timeData.minutes) | fillZero
            }}</span>
            <span class="unit">分</span>
            <span class="time">{{ timeData.seconds | fillZero }}</span>
            <span class="unit">秒</span>
          </template>
        </van-count-down>
      </div>
    </header>
    <main>
      <div class="banner"></div>
      <div class="sign-up">
        <div class="resume">- 开课3天内，对课程不满意无条件退还12元 -</div>
        <div class="sign-up-form">
          <div
            class="mobile-input"
            ref="mobileInput"
            :class="{ valid: !!signupForm.mobile }"
            @click.stop="
              isCodeKeyboardShow = false;
              isMobileKeyboardShow = true;
            "
          >
            {{ signupForm.mobile || "请输入手机号" }}
          </div>
          <div class="code-input" :class="{ valid: !!signupForm.code }">
            <div
              @click.stop="
                isMobileKeyboardShow = false;
                isCodeKeyboardShow = true;
              "
            >
              {{ signupForm.code || "请输入验证码" }}
            </div>
            <div @click="getCode">{{ signupForm.msg || "获取验证码" }}</div>
          </div>
          <div class="sign-up-btn">立即报名</div>
        </div>
      </div>
      <div class="new-customers">
        <div class="title">最新报名客户</div>
        <div class="customer-list">
          <ol :style="transition">
            <li v-for="([mobile, second], i) of customers" :key="i">
              <span>{{ mobile }}</span>
              <span>报名成功</span>
              <span>{{ second }}秒前</span>
            </li>
          </ol>
        </div>
      </div>
      <div class="img-wrapper">
        <img src="../assets/images/crowd.png" />
      </div>
      <div class="img-wrapper">
        <img src="../assets/images/partA3.png" />
      </div>
      <div class="img-wrapper">
        <img src="../assets/images/lessons.png" />
      </div>
      <div class="img-wrapper choose">
        <img src="../assets/images/index_partA5.png" />
      </div>
      <div class="img-wrapper">
        <img src="../assets/images/partA6.png" />
      </div>
      <div class="img-wrapper">
        <img src="../assets/images/notice.png" />
      </div>
    </main>
    <footer>
      <div>
        <div>12元名额仅剩</div>
        <div>
          <span>{{ capSubject }}</span
          >人
        </div>
      </div>
      <div @click="goSignup">立即报名</div>
    </footer>
    <van-number-keyboard
      :show="isMobileKeyboardShow"
      @blur="isMobileKeyboardShow = false"
      v-model="signupForm.mobile"
    />
    <van-number-keyboard
      :show="isCodeKeyboardShow"
      @blur="isCodeKeyboardShow = false"
      v-model="signupForm.code"
    />
  </div>
</template>

<script>
import moment from 'moment';
export default {
  filters: {
    fillZero(v) {
      return (v + '').padStart(2, '0');
    }
  },
  data() {
    let now = moment(),
      timeBucket = '',
      hour = now.hours(),
      minutes = now.minutes(),
      hours = minutes > 50 ? 2 : 1;
    hour = (hour + hours) % 24;
    if (hour >= 6 && hour <= 11) {
      timeBucket = '上午';
    } else if (hour === 12) {
      timeBucket = '中午';
    } else if (hour > 12 && hour <= 18) {
      timeBucket = '下午';
    } else if (hour > 18 && hour < 24) {
      timeBucket = '晚上';
    }

    let time = moment(now).set({m: 0, s: 0, ms: 0}).add(hours, 'h').diff(now, 'ms');
    return {
      countdown: {
        timeBucket,
        hour,
        time
      },
      signupForm: {
        mobile: '',
        code: '',
        msg: ''
      },
      isMobileKeyboardShow: false,
      isCodeKeyboardShow: false,
      customers: [['152****6681', '6'], ['158****6688', '12'], ['186****6736', '9'], ['150****6291', '12'], ['138****1194', '13'], ['156****0212', '6'], ['139****1386', '9'], ['158****8585', '8'], ['133****6347', '12'], ['139****1386', '13'], ['186****3459', '6'], ['185****9992', '8'], ['135****7510', '9'], ['186****6066', '9'], ['187****1967', '10'], ['188****5458', '11'], ['150****5153', '10'], ['135****9329', '10'], ['155****8258', '11'], ['151****3513', '12'], ['173****8070', '13'], ['186****0191', '10'], ['150****4599', '8'], ['152****8555', '13'], ['156****1505', '6'], ['186****1578', '6'], ['156****1505', '7'], ['150****3316', '12'], ['180****2315', '10'], ['182****8886', '6'], ['189****4628', '12'], ['136****9369', '6'], ['152****7918', '7'], ['189****2182', '7'], ['153****5653', '8'], ['151****7610', '9'], ['134****5348', '8'], ['182****1307', '10'], ['180****1740', '11'], ['159****7043', '6'], ['188****2835', '13'], ['138****8255', '9'], ['150****3522', '7'], ['181****9431', '7'], ['186****6211', '12'], ['131****8173', '13'], ['157****6756', '8'], ['187****8957', '7'], ['136****2910', '13'], ['151****7727', '9'], ['136****2910', '9'], ['182****7730', '11'], ['186****6928', '7'], ['158****2075', '8'], ['181****5388', '12'], ['189****9299', '12'], ['135****9922', '11'], ['133****9596', '10'], ['137****1231', '8'], ['153****0930', '6'], ['189****4667', '9'], ['135****2068', '8'], ['138****1085', '10'], ['138****8823', '8'], ['153****5985', '10'], ['181****1960', '8'], ['136****2119', '12'], ['134****2951', '12'], ['134****2951', '11'], ['181****9592', '10'], ['156****5050', '8'], ['159****0711', '6'], ['159****0711', '12'], ['139****1673', '8'], ['150****4624', '10'], ['158****5591', '7'], ['153****8291', '10'], ['188****7743', '10'], ['181****0232', '6'], ['176****9312', '10'], ['131****0095', '8'], ['132****3017', '13'], ['137****1418', '9'], ['156****1996', '8'], ['135****6414', '9'], ['159****4848', '6'], ['139****9627', '13'], ['183****0221', '12'], ['138****8452', '11'], ['150****5265', '7'], ['189****9533', '10'], ['152****4232', '12'], ['187****1677', '6'], ['138****7989', '8'], ['155****5755', '12'], ['158****6940', '8'], ['186****7360', '12'], ['151****7008', '10'], ['158****0503', '13'], ['136****2593', '12']],
      customerCount: 0,
      capSubject: 43,
      index: 0,
      transition: {},
      getCodeCountDown: 60
    };
  },
  methods: {
    goSignup() {
      if (!this.signupForm.mobile || !this.signupForm.code) {
        this.$refs.mobileInput.scrollIntoView();
        // return;
      } else {
      }
    },
    getCode() {
      if (this.getCodeInterval) {
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.signupForm.mobile)) {
        return this.$toast('请输入正确的手机号');
      }
      this.$toast('验证码已发送');
      this.getCodeCountDown = 60;
      this.signupForm.msg = `${this.getCodeCountDown}秒后重发`;
      this.getCodeInterval = setInterval(() => {
        if (this.getCodeCountDown > 1) {
          this.signupForm.msg = `${--this.getCodeCountDown}秒后重发`;
        } else {
          this.signupForm.msg = '';
          this.getCodeCountDown = 60;
        }
      }, 1000);
    }
  },
  mounted() {
    this.customerCount = this.customers.length;
    this.customers = this.customers.concat(this.customers);
    let customerInterval = (min, max) => {
      let interval = parseInt(Math.random() * (max - min + 1) + min, 10) * 1000;
      this.countdownInterval = setTimeout(() => {
        if (this.capSubject <= 3) {
          return;
        }
        if (this.index === this.customerCount) {
          this.index = 0;
          this.transition = {
            transition: 'none',
            transform: `translateY(-${this.index * 8}vw)`
          };
        } else {
          this.index++;
          this.transition = {
            transition: 'all 1s',
            transform: `translateY(-${this.index * 8}vw)`
          };
        }
        this.capSubject--;
        customerInterval(min, max);
      }, interval);
    };
    customerInterval(10, 22);
  },
  beforeDestroy() {
    if (this.countdownInterval) {
      clearInterval(this.countdownInterval);
    }
    if (this.getCodeInterval) {
      clearInterval(this.getCodeInterval);
    }
  }
};
</script>

<style lang="less" scoped>
.promote {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  header {
    display: flex;
    position: fixed;
    z-index: 10;
    justify-content: space-between;
    top: 0;
    left: 0;
    right: 0;
    height: 86px;
    padding: 0 30px;
    background: #5f99ff;
    color: #fff;
    font-size: 30px;
    align-items: center;
    > div {
      display: flex;
      align-items: center;
      > div {
        &:first-child {
          padding-right: 20px;
        }
        .unit {
          font-size: 30px;
          color: #fff;
        }
        .time {
          font-size: 40px;
          color: #ffd316;
        }
      }
    }
  }
  main {
    padding: 84px 0 110px;
    .banner {
      height: 626px;
      background: url(../assets/images/banner2.png) no-repeat center center;
      background-size: contain;
    }
    .sign-up {
      padding: 0 80px;
      .resume {
        height: 110px;
        line-height: 110px;
        text-align: center;
        font-size: 26px;
        color: #38465d;
      }
      .sign-up-form {
        > div {
          line-height: 90px;
          height: 90px;
          background: #f5f8ff;
          &:not(:last-child) {
            margin-bottom: 20px;
          }
        }
        > .mobile-input {
          position: relative;
          padding-left: 150px;
          font-size: 28px;
          color: #c7c6c8;
          &.valid {
            color: #4b4b4c;
          }
          &::before {
            content: "+86";
            position: absolute;
            left: 30px;
            top: 0;
            color: #4b4b4c;
            font-size: 32px;
          }
          &::after {
            content: "";
            position: absolute;
            border: 8px solid;
            left: 100px;
            top: 42px;
            border-color: #78a7ff transparent transparent;
          }
        }
        .code-input {
          padding-left: 56px;
          display: flex;
          font-size: 28px;
          color: #c7c6c8;
          &.valid > div:first-child {
            color: #4b4b4c;
          }
          > div {
            &:first-child {
              flex: 1;
            }
            &:last-child {
              width: 220px;
              height: 100%;
              color: #4b4b4c;
              text-align: center;
            }
          }
        }
        .sign-up-btn {
          font-size: 36px;
          color: #fff;
          text-align: center;
          background: linear-gradient(to bottom, #ff929d, #ff0034);
        }
      }
    }
    .new-customers {
      .title {
        padding: 40px 0 20px 0;
        text-align: center;
        font-size: 28px;
        color: #38465d;
      }
      .customer-list {
        height: 120px;
        overflow: hidden;
        > ol {
          > li {
            font-size: 24px;
            text-align: center;
            height: 60px;
            :not(:last-child) {
              margin-right: 40px;
            }
          }
        }
      }
    }
    .img-wrapper {
      &.choose {
        padding: 50px 30px;
      }
      img {
        width: 100%;
      }
    }
  }
  footer {
    display: flex;
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110px;
    background: #fff;
    > div {
      height: 100%;
      &:first-child {
        width: 310px;
        height: 100%;
        > div {
          text-align: center;
          &:first-child {
            padding-top: 16px;
            font-size: 24px;
            color: #38465d;
          }
          &:last-child {
            font-size: 26px;
            > span {
              color: #ff6957;
              font-size: 32px;
            }
          }
        }
      }
      &:last-child {
        flex: 1;
        background: linear-gradient(to bottom, #ff929d, #ff0034);
        color: #fff;
        font-size: 44px;
        text-align: center;
        line-height: 110px;
      }
    }
  }
  /deep/.van-key {
    height: 100px;
    line-height: 100px;
    font-size: 28px;
  }
}
</style>
